<template>
  <!-- 考勤统计 -->
  <div id="atten-details">
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div>
            <span class="preview-title">{{ classData.courseName }}</span>
            <span class="preview-line"></span>
            <span style="margin-right:10px;">{{ classData.name }}</span>
            <span>{{ classData.grade }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="jx-content">
      <div class="search-box fl">
        <el-form :inline="true" @submit.native.prevent>
          <el-form-item label="学生信息 :">
            <el-input v-model="userInfo" placeholder="请输入学号或姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="button-style" @click="getList">搜 索</div>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="tableLoading" :data="list" style="width: 100%">
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="name" label="学生姓名"></el-table-column>
        <el-table-column prop="userNumber" label="学生学号"></el-table-column>
        <el-table-column class="blue" prop="truantNum" label="旷课次数">
          <template slot-scope="scope">
            <div class="ts-c-blue">{{ scope.row.truantNum }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      classId: this.$route.query.classId,
      courseId: this.$route.query.courseId,
      userInfo: '',
      list: [],
      tableLoading: "",
      classData:{
        courseName:'',
        grade:'',
        //班级名称
        name:'',
      },
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getCourseName();
      this.getClassName();
      this.getList();
    },
    doSubmit(){
      return false;
    },
    //获取课程名称
    getCourseName() {
      let self = this;
      let courseId = self.courseId;
      self.$http
        .get(`/tes/course/${courseId}/chapter/0`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res,223);
            self.classData.courseName = res.data.courseName;
          } else{
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          self.$message.error(err.message);
        });
    },
    //获取班级和年级名称
    getClassName() {
      let self = this;
      let classId = self.classId;
      self.$http
        .get(`/tes/course/class/${classId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            self.classData.grade = res.data.grade;
            self.classData.name = res.data.name;
          } else{
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          self.$message.error(err.message);
        });
    },
    //获取列表数据
    getList() {
      let self = this;
      let classId = self.classId;
      let courseId = self.courseId;
      self.$http.post(`/tes/statistic/course/${courseId}/class/${classId}/detail`,{
        userInfo:self.userInfo,
      })
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res,22423);
            self.list = res.data;
          } else{
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          self.$message.error(err.message);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../styles/img-init";
</style>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#atten-details.isCreativeCourse {
  margin: 20px auto 30px;
}
#atten-details {
  box-shadow: 0px 0px 0px;
  border-radius: none;
  img {
    max-width: 80%;
  }
  .preview-top {
    position: relative;
    z-index: 1;
    height: 80px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
  }
}
</style>
